'use strict';

import React from 'react';
import Radium from 'radium';
import assign from 'object-assign';
import { IN_DEPLOY_URI } from 'lightbi-front-utils';

@Radium
class IndexHeaderLeftItem extends React.Component {
  Props : {
    router : any;
    item : string;
    selectedItem : string;
  };

  constructor(props : Props) {
    super(props);
    (this : any).goto = this.goto.bind(this);
    (this : any).onMouseOver = this.onMouseOver.bind(this);
    (this : any).onMouseOut = this.onMouseOut.bind(this);
  }

  goto() {
    if(this.props.item == '首页')
      window.location.href = IN_DEPLOY_URI + '/';
    else if(this.props.item == '市场')
      window.location.href = IN_DEPLOY_URI + '/market';
  }

  onMouseOver() {
    this.setState({ isOver : true });
  }

  onMouseOut() {
    this.setState({ isOver : false });
  }

  render() {
    var style = { minWidth: '130px', textAlign: 'center', cursor : 'pointer', borderTop : '2px solid #fff', '@media screen and (max-width: 992px)': { minWidth: '60px' } };
    if(this.props.item == this.props.selectedItem)
      style = assign(style, { color : '#3a8fc8' });
    if(!!this.state.isOver)
      style = assign(style, { borderTop : '2px solid rgb(91, 77, 145)' });

    return (
      <div className="pull-left" style={style} onClick={this.goto} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} >
        {this.props.item}
      </div>
    );
  }
};

@Radium
class IndexHeaderRightItem extends React.Component {
  Props : {
    router : any;
    location : any;
    item : string;
    selectedItem : string;
  };

  constructor(props : Props) {
    super(props);
    (this : any).goto = this.goto.bind(this);
    (this : any).onMouseOver = this.onMouseOver.bind(this);
    (this : any).onMouseOut = this.onMouseOut.bind(this);
    this.state = {};
    this.jumpUri = this.props.location.query['jumpUri'];
  }

  goto() {
    if(this.props.item == '注册') {
      if(this.jumpUri == null || this.jumpUri.length == 0)
        this.props.router.push(IN_DEPLOY_URI + '/entrance/register');
      else
        this.props.router.push(IN_DEPLOY_URI + '/entrance/register?jumpUri=' + this.jumpUri);
    } else if(this.props.item == '登录') {
      if(this.jumpUri == null || this.jumpUri.length == 0)
        this.props.router.push(IN_DEPLOY_URI + '/entrance/login');
      else
        this.props.router.push(IN_DEPLOY_URI + '/entrance/login?jumpUri=' + this.jumpUri);
    }
  }

  onMouseOver() {
    this.setState({ isOver : true });
  }

  onMouseOut() {
    this.setState({ isOver : false });
  }

  render() {
    var style = { minWidth: '130px', textAlign: 'center', borderTop : '2px solid #fff', cursor : 'pointer', '@media screen and (max-width: 992px)': { minWidth : '60px' } };
    if(this.props.item == this.props.selectedItem)
      style = assign(style, { color : '#3a8fc8' });
    if(!!this.state.isOver)
      style = assign(style, { borderTop : '2px solid rgb(91, 77, 145)' });

    return (
      <div className="pull-right" style={style} onClick={this.goto} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} >
        {this.props.item}
      </div>
    );
  }
};

@Radium
class IndexHeader extends React.Component {
  Props : {
    selectedItem : string;
    router : any;
    location : any;
  };

  constructor(props : Props) {
    super(props);
    (this : any).gotoIndex = this.gotoIndex.bind(this);
  }

  gotoIndex() {
    window.location.href = "/";
    //this.props.router.push(IN_DEPLOY_URI + "/");
  }

  render() {
    return (
      <div style={{ position : 'fixed', top : '0px', left : '0px', right : '0px', height : '60px', zIndex : '1', borderBottom : '1px solid #e6e6e6', backgroundColor : '#fff' }}>
        <div className="row" style={{lineHeight : '60px', margin : '0px'}} >
          {
            process.env.CLIENT_ENV !== "nw" ?
              <div className="pull-left" style={{ cursor : 'pointer', minWidth : '140px', color : '#48B0F7', '@media screen and (max-width: 992px)': { minWidth : '60px' } }} onClick={this.gotoIndex}>
                <div class="row" style={{ fontSize: '16px', height: '60px', margin : '0px' }}>
                  <div className="pull-left" style={{ padding : '10px 5px 10px 10px', width : '165px', '@media screen and (max-width: 992px)': { display : 'none' } }} >
                    <img src="/img/logo.png" />
                  </div>
                  <div className="pull-left" style={{ padding : '10px', width : '110px', display : 'none', '@media screen and (max-width: 992px)': { display : 'block' } }} >
                    <img src="/img/logo.png" />
                  </div>
                </div>
              </div>
              :
              null
          }
          <IndexHeaderLeftItem key="introduce" router={this.props.router} item="首页" selectedItem={this.props.selectedItem} />
          <IndexHeaderRightItem key="login" router={this.props.router} location={this.props.location} item="登录" selectedItem={this.props.selectedItem} />
          <IndexHeaderRightItem key="register" router={this.props.router} location={this.props.location} item="注册" selectedItem={this.props.selectedItem} />
        </div>
      </div>
    );
  }
}

module.exports=IndexHeader;
//          <IndexHeaderLeftItem key="market" router={this.props.router} item="市场" selectedItem={this.props.selectedItem} />
